var area_bounds_latlng = new Array();
var landmark_marker = "";
var landmark_circle = "";
hotel_map = new AMap.Map('J_hotel_map', {
    resizeEnable: true,
    scrollWheel: false,
    center: [config.lng, config.lat],
    zoom: config.zoom
},function(){
});

var googleLayer = new AMap.TileLayer({
    tileUrl: HQ.config.map.tileUrl,
    zIndex:100
});
googleLayer.setMap(hotel_map);

var hotel_marker = [];

AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
    var zoomCtrl = new BasicControl.Zoom({
        position: {
            top:'10px',
            right:'10px',
        },
    });
    hotel_map.addControl(zoomCtrl);
});

hotel_map.setZoom(11);

var polygon = [];
var markers = [];
function set_area_markers() {
    if(landmark_marker !="" && landmark_circle !="") {
        landmark_marker.setMap(null);
        landmark_circle.setMap(null);
    }

    for(var i = 0; i < polygon.length; i++){
        polygon[i].setMap(null);
    }
    if ($('#J_area_popup').length > 0){
        $("#J_area_popup").find(".area_list_filter_b").each(function (zk, zvalue) {
            var latlngs = $(this).find(".hotel-l-filter-o").attr("data-latlng");
            var latlngs_arr = latlngs.split(",");
            var area_id = $(this).find(".hotel-l-filter-o").attr("data-id");
            var area_name = $(this).find(".hotel-l-filter-o").attr("data-name");
            var index = $(this).find(".hotel-l-filter-o").attr("data-name")
            var polygonArr = new Array();
            $.each(latlngs_arr, function (key, value) {
                if (key % 2 == 0 && value != undefined && value != null && value != "") {
                    polygonArr.push([latlngs_arr[key + 1], value]);
                }
            });
            polygon[zk] = new AMap.Polygon({
                path: polygonArr,
                strokeColor: "#4499ff",
                strokeOpacity: 1,
                strokeWeight: 2,
                fillColor: "#4499ff",
                fillOpacity: 0.2,
                extData: area_id
            });
            if ($(this).find(".hotel-l-filter-o").attr("data-ishot") == 1) {
                polygon[zk].setMap(hotel_map);
            } else {
                polygon[zk].setMap(null);
            }

            markers[zk] = new AMap.Marker({
                map: hotel_map,
                position: [polygonArr[0]['lng'], polygonArr[0]['lat']],
                icon: new AMap.Icon({
                    size: new AMap.Size(17, 26),
                    image: "",
                    imageOffset: new AMap.Pixel(-16, -8),
                }),
                zIndex: 1,
            });

            markers[zk].setLabel({
                offset: new AMap.Pixel(8, 25),
                content: "<div class='map-label-txt-w J_label_"+area_id+"' style='visibility:hidden;'><p class='map-label-txt init-map-label-txt'>" + area_name + "</p><span class='map-label-bg'></span></div>"
            });

            polygon[zk].on('mouseover', function (e) {
                this.setOptions({
                    strokeColor: "#e16361",
                    fillColor: "#e16361",
                    fillOpacity: 0.4
                });

                $(".J_label_"+area_id).css({visibility: 'visible'}).parent().css({zIndex: 4});
                $("#J_zone_list li").eq(zk).addClass("current");
            }).on("mouseout", function () {
                this.setOptions({
                    strokeColor: "#4499ff",
                    fillColor: "#4499ff",
                    fillOpacity: 0.2
                });

                $(".J_label_"+area_id).css({visibility: 'hidden'}).parent().css({zIndex: 1});
            });
        });
    }else {
        $("#J_filter_area").find(".area_list_filter_b").each(function (zk, zvalue) {
            var latlngs = $(this).find(".hotel-l-filter-o").attr("data-latlng");
            var latlngs_arr = latlngs.split(",");
            var area_id = $(this).find(".hotel-l-filter-o").attr("data-id");
            var area_name = $(this).find(".hotel-l-filter-o").attr("data-name");
            var index = $(this).find(".hotel-l-filter-o").attr("data-name")
            var polygonArr = new Array();
            $.each(latlngs_arr, function (key, value) {
                if (key % 2 == 0 && value != undefined && value != null && value != "") {
                    polygonArr.push([latlngs_arr[key + 1], value]);
                }
            });
            polygon[zk] = new AMap.Polygon({
                path: polygonArr,
                strokeColor: "#4499ff",
                strokeOpacity: 1,
                strokeWeight: 2,
                fillColor: "#4499ff",
                fillOpacity: 0.2,
                extData: area_id
            });
            polygon[zk].setMap(hotel_map);

            markers[zk] = new AMap.Marker({
                map: hotel_map,
                position: [polygonArr[0]['lng'], polygonArr[0]['lat']],
                icon: new AMap.Icon({
                    size: new AMap.Size(17, 26),
                    image: "",
                    imageOffset: new AMap.Pixel(-16, -8),
                }),
                zIndex: 1,
            });

            markers[zk].setLabel({
                offset: new AMap.Pixel(8, 25),
                content: "<div class='map-label-txt-w J_label_"+area_id+"' style='visibility:hidden;'><p class='map-label-txt init-map-label-txt'>" + area_name + "</p><span class='map-label-bg'></span></div>"
            });

            polygon[zk].on('mouseover', function (e) {
                this.setOptions({
                    strokeColor: "#e16361",
                    fillColor: "#e16361",
                    fillOpacity: 0.4
                });

                $(".J_label_"+area_id).css({visibility: 'visible'}).parent().css({zIndex: 4});
                $("#J_zone_list li").eq(zk).addClass("current");
            }).on("mouseout", function () {
                this.setOptions({
                    strokeColor: "#4499ff",
                    fillColor: "#4499ff",
                    fillOpacity: 0.2
                });

                $(".J_label_"+area_id).css({visibility: 'hidden'}).parent().css({zIndex: 1});
            });
        });
    }
    hotel_map.setFitView(11);
}
if(config.city != 87){
    set_area_markers();
}

function set_area_marker(obj){
    if(landmark_marker !="" && landmark_circle !="") {
        landmark_marker.setMap(null);
        landmark_circle.setMap(null);
    }
    hotel_map.clearMap();
    for(var i = 0; i < polygon.length; i++){
        polygon[i].setMap(null);
    }
    if ($('#J_area_popup').length > 0 && $("#J_filter_area .list-filter-f").find("span").attr("data-sel") != 1){
        $("#J_area_popup").find("span").each(function (zk, zvalue) {
             if(($(this).attr("data-sel") == 1) && ($(this).attr("data-filter").split("|")[1] != "")){
                var latlngs = $(this).attr("data-latlng");
                var latlngs_arr = latlngs.split(",");
                var area_id = $(this).attr("data-id");
                var area_name = $(this).attr("data-name");
                var index = $(this).attr("data-name")
                var polygonArr = new Array();
                $.each(latlngs_arr, function (key, value) {
                    if (key % 2 == 0 && value != undefined && value != null && value != "") {
                        polygonArr.push([latlngs_arr[key + 1], value]);
                    }
                });
                polygon[zk] = new AMap.Polygon({
                    path: polygonArr,
                    strokeColor: "#4499ff",
                    strokeOpacity: 1,
                    strokeWeight: 2,
                    fillColor: "#4499ff",
                    fillOpacity: 0.2,
                    extData: area_id
                });
                polygon[zk].setMap(hotel_map);

                markers[zk] = new AMap.Marker({
                    map: hotel_map,
                    position: [polygonArr[0]['lng'], polygonArr[0]['lat']],
                    icon: new AMap.Icon({
                        size: new AMap.Size(17, 26),
                        image: "",
                        imageOffset: new AMap.Pixel(-16, -8),
                    }),
                    zIndex: 1,
                });

                markers[zk].setLabel({
                    offset: new AMap.Pixel(8, 25),
                    content: "<div class='map-label-txt-w J_label_"+area_id+"' style='visibility:hidden;'><p class='map-label-txt init-map-label-txt'>" + area_name + "</p><span class='map-label-bg'></span></div>"
                });

                polygon[zk].on('mouseover', function (e) {
                    this.setOptions({
                        strokeColor: "#e16361",
                        fillColor: "#e16361",
                        fillOpacity: 0.4
                    });

                    $(".J_label_"+area_id).css({visibility: 'visible'}).parent().css({zIndex: 4});
                    $("#J_zone_list li").eq(zk).addClass("current");
                }).on("mouseout", function () {
                    this.setOptions({
                        strokeColor: "#4499ff",
                        fillColor: "#4499ff",
                        fillOpacity: 0.2
                    });

                    $(".J_label_"+area_id).css({visibility: 'hidden'}).parent().css({zIndex: 1});
                });
            }
        });
    } else if ($("#J_filter_area .list-filter-f").find("span").attr("data-sel") == 1) {
        set_area_markers();
    }else {
        $("#J_filter_area").find("span").each(function (zk, zvalue) {
            if(($(this).attr("data-sel") == 1) && ($(this).attr("data-filter").split("|")[1] != "")){
                var latlngs = $(this).attr("data-latlng");
                var latlngs_arr = latlngs.split(",");
                var area_id = $(this).attr("data-id");
                var area_name = $(this).attr("data-name");
                var index = $(this).attr("data-name")
                var polygonArr = new Array();
                $.each(latlngs_arr, function (key, value) {
                    if (key % 2 == 0 && value != undefined && value != null && value != "") {
                        polygonArr.push([latlngs_arr[key + 1], value]);
                    }
                });
                polygon[zk] = new AMap.Polygon({
                    path: polygonArr,
                    strokeColor: "#4499ff",
                    strokeOpacity: 1,
                    strokeWeight: 2,
                    fillColor: "#4499ff",
                    fillOpacity: 0.2,
                    extData: area_id
                });
                polygon[zk].setMap(hotel_map);

                markers[zk] = new AMap.Marker({
                    map: hotel_map,
                    position: [polygonArr[0]['lng'], polygonArr[0]['lat']],
                    icon: new AMap.Icon({
                        size: new AMap.Size(17, 26),
                        image: "",
                        imageOffset: new AMap.Pixel(-16, -8),
                    }),
                    zIndex: 1,
                });

                markers[zk].setLabel({
                    offset: new AMap.Pixel(8, 25),
                    content: "<div class='map-label-txt-w J_label_"+area_id+"' style='visibility:hidden;'><p class='map-label-txt init-map-label-txt'>" + area_name + "</p><span class='map-label-bg'></span></div>"
                });

                polygon[zk].on('mouseover', function (e) {
                    this.setOptions({
                        strokeColor: "#e16361",
                        fillColor: "#e16361",
                        fillOpacity: 0.4
                    });

                    $(".J_label_"+area_id).css({visibility: 'visible'}).parent().css({zIndex: 4});
                    $("#J_zone_list li").eq(zk).addClass("current");
                }).on("mouseout", function () {
                    this.setOptions({
                        strokeColor: "#4499ff",
                        fillColor: "#4499ff",
                        fillOpacity: 0.2
                    });

                    $(".J_label_"+area_id).css({visibility: 'hidden'}).parent().css({zIndex: 1});
                });
            }
        });
    }
    // hotel_map.setFitView(obj);
    hotel_map_cb()

}

function hotel_map_cb(){
    for(var i =0 ;i<hotel_marker.length;i++){
        hotel_marker[i].setMap(null);
    }

    $(".J_hosel_map").parent().remove();

    if($(".J_hotel_list").length == 0){
        return false;
    }
    var latlng = "";
    $(".J_hotel_list").each(function(key,value){
        latlng = $(this).attr("data-latlng").split(",");
        var labelIndex = key + 1;
        hotel_marker[key] = new AMap.Marker({
            map: hotel_map,
            position: [latlng[1], latlng[0]],
            icon: new AMap.Icon({
                size: new AMap.Size(23, 32),
                image: "",
                imageOffset: new AMap.Pixel(-15, -135),
            }),
            zIndex:1
        });
        hotel_marker[key].setLabel({
            offset: new AMap.Pixel(-20, 2),
            content: '<div data-id="'+ $(this).attr("data-id") +'" class="map-attraction-poi map-attraction-poi-h J_hosel_map J_hotel_icon'+ $(this).attr("data-id") +'"><i class="list-icon-map"><em>' + labelIndex + '</em></i><div class="map-label-txt-w"><p class="map-label-txt">'+ $(this).attr("data-name") +'</p><span class="map-label-bg"></span></div></div>'
        });


    });
    $(".list-map-wap .enlarge").css("display", "block");
    $(".list-map-wap .narrow").css("display", "block");
    hotel_map.setFitView();
    if($(".list-map-wap").find("a").hasClass('list-link')){
        $(this).live("click", function (event) {
            event.preventDefault();
            $(this).css('display', "none");
            $(this).removeAttr("href");
        });
    }


}

var is_attr_span = 0;
var attr_timer = "";
$(".J_attraction a").click(function(){
    setTimeout(function(){
        clearTimeout(attr_timer);
    }, 200);

    landmark_li_click($(this));

    return false;
});

function set_landmark_marker(obj){
    var landmark_latlng = obj.attr("data-latlng").split(",");

    if(landmark_latlng[1] == "" && landmark_latlng[0] =="" ){
        for(var i=0;i<polygon.length;i++){
            polygon[i].setMap(hotel_map);
            markers[i].setMap(hotel_map);
        }
    }else {
        hotel_map.remove(landmark_marker);
        hotel_map.remove(landmark_circle);

        for (var i = 0; i < polygon.length; i++) {
            polygon[i].setMap(null);
            markers[i].setMap(null);
        }

        landmark_marker = new AMap.Marker({
            resizeEnable: true,
            position: [landmark_latlng[1], landmark_latlng[0]],
            icon: new AMap.Icon({
                size: new AMap.Size(30, 35),
                image: "https://img.haoqiao.com/website/images/hotel_list/list_map_jd.svg"
            }),
        });
        landmark_marker.setMap(hotel_map);
        landmark_marker.setLabel({
            offset: new AMap.Pixel(8, 25),
            content: '<div class="map-attraction-poi J_icon_m J_icon' + obj.attr("data-id") + '"><div class="map-label-txt-w" style="top:10px;"><p class="map-label-txt" style="background:#00b63d;">'+HQ.config.language.attr_map_ch[language][6] + obj.attr("data-name") + '</p><span class="map-label-landbg"></span></div></div>'
        });
        
        landmark_circle = new AMap.Circle({
            center: new AMap.LngLat(landmark_latlng[1], landmark_latlng[0]),
            radius: 2000,
            strokeColor: "#ffffff",
            strokeOpacity: 0,
            strokeWeight: 2,
            fillColor: "#ffffff",
            fillOpacity: 0
        });

        landmark_circle.setMap(hotel_map);
        hotel_map.setZoom(12);
    }
    hotel_map.setFitView(landmark_circle);
}
